import React, { Component } from 'react';
import { Text, Image, View, TextInput, TouchableOpacity, ScrollView } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_member_info_companyRealname, api_member_info_indeed } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';
import { MyInput1, MyInput2 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ChooseSingleImageItem, ChooseMultiplyImageItem } from '../components/Item';
import { LoadingAndPorgressModal } from '../components/Modal';
import { uploadFile } from '../constants/UpLoadHelper';
import { ExamineView } from '../components/EmptyView';

export default class EnterpriseIndeedCertificationScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.state = {
            business_address: '',//营业地址
            productive_power: '',//生产能力及质量管理
            technical_level: '',//技术水平及生产开发能力
            staff: [],//员工情况url
            original_certificate: [],//证书原件url
            indeed_photos: [],//实地照片url
            stockholder: [],//股东合影url

            staffImageList: [],//员工情况图片列表
            original_certificateImageList: [],//证书原件图片列表
            indeed_photosImageList: [],//实地照片图片列表
            stockholderImageList: [],//股东合影图片列表

            progress: '0%',

            showExamineView: global.companyInfo && global.companyInfo.on_the_spot_info ? true : false
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    };

    render() {
        if (this.state.showExamineView) {
            let view;
            if (global.companyInfo.on_the_spot_info.is_pass == '0') {
                view = <ExamineView showRecertification={false} onPress={() => { }} reason='正在审核' />
            } else if (global.companyInfo.on_the_spot_info.is_pass == '1') {
                view = <ExamineView showRecertification={false} onPress={() => { }} reason='审核通过' />
            } else if (global.companyInfo.on_the_spot_info.is_pass == '2') {
                view = <ExamineView showRecertification={true} onPress={() => { this.setState({ showExamineView: false }) }} reason={'审核不通过原因：' + global.companyInfo.on_the_spot_info.remark} />
            }
            return (
                <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                    <MyHeader title='实地认证' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                    {view}
                </View>
            );
        }
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='实地认证' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View>
                        <View style={{ flexDirection: 'row', flexWrap: 'wrap', marginVertical: 10 * unitWidth, marginHorizontal: 15 * unitWidth }}>
                            <Text style={{ fontSize: 14 * unitWidth, color: Colors.colorOrange }}>
                                <Image style={{ width: 18 * unitWidth, height: 18 * unitWidth }} source={require('../res/me_tip.png')} resizeMode='stretch' />
                                {'  以下信息务必真实可靠，平台工作人员将不定期对贵司进行实地考证，如发现与上传资料不符，将取消入驻商户资格'}
                            </Text>
                        </View>
                        <MyInput1
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onBusinessAddressTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>营业地址：</Text>
                            }
                            maxLength={100}
                            placeholder='请输入正确的营业地址'
                            value={this.state.business_address} isLast={false} />
                        <ChooseMultiplyImageItem
                            style={{}}
                            title='各部门员工情况'
                            ImageList={this.state.staffImageList}
                            onDeletePress={(index) => {
                                this.state.staffImageList.splice(index, 1);
                                this.setState({
                                    staffImageList: this.state.staffImageList
                                })
                            }}
                            onChooseSuccess={(selectedPhotos) => {
                                this.setState({
                                    staffImageList: [...this.state.staffImageList, ...selectedPhotos]
                                })
                            }}
                            isLast={false} />
                        <MyInput2
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onProductivePowerTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>生产能力及质量管理：</Text>
                            }
                            maxLength={800}
                            placeholder='(请填写生产能力及质量管理)'
                            value={this.state.productive_power} isLast={false} />
                        <MyInput2
                            style={{ marginTop: 0 * unitWidth }}
                            onChangeText={this.onTechnicalLevelTextChange.bind(this)}
                            title={
                                <Text style={{ color: Colors.black, fontSize: 15 }}>技术水平及生产开发能力：</Text>
                            }
                            maxLength={800}
                            placeholder='(请填写技术水平及生产开发能力)'
                            value={this.state.technical_level} isLast={false} />
                        <ChooseMultiplyImageItem
                            style={{}}
                            title='各类证书原件'
                            ImageList={this.state.original_certificateImageList}
                            onDeletePress={(index) => {
                                this.state.original_certificateImageList.splice(index, 1);
                                this.setState({
                                    original_certificateImageList: this.state.original_certificateImageList
                                })
                            }}
                            onChooseSuccess={(selectedPhotos) => {
                                this.setState({
                                    original_certificateImageList: [...this.state.original_certificateImageList, ...selectedPhotos]
                                })
                            }}
                            isLast={false} />
                        <ChooseMultiplyImageItem
                            style={{}}
                            title='企业实地照片'
                            ImageList={this.state.indeed_photosImageList}
                            onDeletePress={(index) => {
                                this.state.indeed_photosImageList.splice(index, 1);
                                this.setState({
                                    indeed_photosImageList: this.state.indeed_photosImageList
                                })
                            }}
                            onChooseSuccess={(selectedPhotos) => {
                                this.setState({
                                    indeed_photosImageList: [...this.state.indeed_photosImageList, ...selectedPhotos]
                                })
                            }}
                            isLast={false} />
                        <ChooseMultiplyImageItem
                            style={{}}
                            title='股东合影'
                            ImageList={this.state.stockholderImageList}
                            onDeletePress={(index) => {
                                this.state.stockholderImageList.splice(index, 1);
                                this.setState({
                                    stockholderImageList: this.state.stockholderImageList
                                })
                            }}
                            onChooseSuccess={(selectedPhotos) => {
                                this.setState({
                                    stockholderImageList: [...this.state.stockholderImageList, ...selectedPhotos]
                                })
                            }}
                            isLast={false} />
                        <SubmitButton1 style={{ marginVertical: 38 * unitWidth, alignSelf: 'center' }} text='提交认证' onPress={() => {
                            this.doUpload();
                        }} />
                    </View>
                </ScrollView>
                <LoadingAndPorgressModal ref='LoadingAndPorgressModal' progress={this.state.progress} />
            </View>
        );
    }

    onBusinessAddressTextChange(text) {
        this.setState({
            business_address: text
        })
    }

    onProductivePowerTextChange(text) {
        this.setState({
            productive_power: text
        })
    }

    onTechnicalLevelTextChange(text) {
        this.setState({
            technical_level: text
        })
    }

    doUpload() {
        if (this.state.business_address == '') {
            show('营业地址');
            return;
        } else if (this.state.productive_power == '') {
            show('生产能力及质量管理');
            return;
        } else if (this.state.technical_level == '') {
            show('技术水平及生产开发能力');
            return;
        } else if (this.state.staffImageList.length == 0) {
            show('请选择员工情况');
            return;
        } else if (this.state.original_certificateImageList.length == 0) {
            show('请选择证书原件');
            return;
        } else if (this.state.indeed_photosImageList.length == 0) {
            show('请选择实地照片');
            return;
        } else if (this.state.stockholderImageList.length == 0) {
            show('请选择股东合影');
            return;
        }
        let ImageList = [...this.state.staffImageList, ...this.state.original_certificateImageList, ...this.state.indeed_photosImageList, ...this.state.stockholderImageList];

        if (ImageList && ImageList.length > 0) {
            this.refs.LoadingAndPorgressModal.showModal();
            uploadFile(ImageList, (text) => {
                this.setState({
                    progress: text
                })
            }, {
                success: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();
                    let len1 = this.state.staffImageList.length;
                    let len2 = this.state.staffImageList.length + this.state.original_certificateImageList.length;
                    let len3 = this.state.staffImageList.length + this.state.original_certificateImageList.length + this.state.indeed_photosImageList.length;
                    let len4 = this.state.staffImageList.length + this.state.original_certificateImageList.length + this.state.indeed_photosImageList.length + this.state.stockholderImageList.length;

                    this.state.staff = [];
                    this.state.original_certificate = [];
                    this.state.indeed_photos = [];
                    this.state.stockholder = [];

                    for (let i = 0, len = response.files.length; i < len; i++) {
                        if (i < len1) {
                            this.state.staff.push(response.files[i].url)
                        } else if (i < len2) {
                            this.state.original_certificate.push(response.files[i].url)
                        } else if (i < len3) {
                            this.state.indeed_photos.push(response.files[i].url)
                        } else if (i < len4) {
                            this.state.stockholder.push(response.files[i].url)
                        }
                    }
                    this.submit();
                },
                fail: (response) => {
                    this.refs.LoadingAndPorgressModal.hideModal();
                    show('上传失败')
                }
            })
        } else {
            show('请选择营业执照');
            return;
        }
    }

    submit() {
        let params = {
            'business_address': this.state.business_address,//营业地址
            'productive_power': this.state.productive_power,//生产能力及质量管理
            'technical_level': this.state.technical_level,//技术水平及生产开发能力
            'staff': JSON.stringify(this.state.staff),//员工情况url
            'original_certificate': JSON.stringify(this.state.original_certificate),//证书原件url
            'indeed_photos': JSON.stringify(this.state.indeed_photos),//实地照片url
            'stockholder': JSON.stringify(this.state.stockholder),//股东合影url
        }
        postFetch(api_member_info_indeed, params, {
            success: (response) => {
                show('上传成功');
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}